<template>
    <view class="pickUpGoods">
        <view class="address_box">
            <view  class="address_1">{{address_data.address_1}}</view>
            <view  class="address_2">{{address_data.address_2}}</view>
            <view  class="address_3">{{address_data.username}}&nbsp;&nbsp;{{address_data.mobile}}</view>
        </view>
        <view class="goods_box">
            <view class="goods_col_1">
                <view><image class="goods_img" :src="goods_data.goods_img"/></view>
                <view class="stepper"><van-stepper :value="goods_data.goods_num" bind:change="onChange" /></view>
            </view>
            <view class="goods_col_2">相关服务</view>
            <view class="goods_col_3">
                <view class="yun">运费</view>
                <view class="daofu">到付</view>
            </view>
            <view class="goods_col_4">
                <view class="tips_">订单备注</view>
                <view class="input_box"><input  v-model="goods_data.tips" class="tips" placeholder="请输入备注(选填)" /></view>
            </view>

        </view>
        <view @tap="submit()"><button class="goods_button">提交</button></view>
        <Mtips :toShow="show" :message="message" :url="url" :query="query" @sure="sure"></Mtips>
    </view>
</template>

<script>
    import Mtips from '@/components/m-tips.vue'
    export default {
        name:"pickUpGoods",
        data() {
            return {
                address_data:{
                    address_1:"四川省成都市高新区",
                    address_2:"牧华路绿地中心1栋",
                    username:'张三',
                    mobile:'158547458784'
                },
                show:false,
                message:'提交成功',
                url:'/main/user',
                query:"user_id=33&user_name='何炀'",
                goods_data:{
                    goods_img:'../../static/img/point_in.png',
                    goods_num:1,
                    tips:''
                }
            }
        },
        components:{
            Mtips,
        },
        onChange(){

        },
        methods: {
            submit(){
                this.show=true;
            },
            sure(res){ // 子组件传递过来的东西
                this.show=res;
                uni.navigateBack({
                    delta: 1
                });
            }
        }
    }
</script>

<style>
    page {
        background-color:#FAFAFA
    }
    .van-stepper__input{
        background-color: #ffffff !important;
    }
</style>
<style lang="less" scoped>
    .address_box{
        background-color: #ffffff;
        width: 710rpx;
        margin-left: 20rpx;
        margin-top: 20rpx;
        padding-bottom: 8rpx;
        padding-top: 8rpx;
        padding-left: 5rpx;
        padding-right: 5rpx;
    }
    .address_1{
        font-size: 28rpx;
        color: #333333;
        font-weight: lighter;
        margin-top: 10rpx;
        font-family: SourceHanSansCN-Light;
    }
    .address_2{
        font-size: 32rpx;
        color: #333333;
        font-weight: normal;
        margin-top: 10rpx;
        font-family: SourceHanSansCN-Regular;
    }
    .address_3{
        font-size: 30rpx;
        color: #333333;
        font-weight: normal;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
        font-family: SourceHanSansCN-Regular;
    }
    .goods_box{
        background-color: #ffffff;
        margin-left: 20rpx;
        margin-top: 40rpx;
        width: 710rpx;
        padding-top: 8rpx;
        padding-bottom: 20rpx;

    }
    .goods_button{
        text-align: center;
    }
    .goods_img{
        height: 120rpx;
        width: 120rpx;
    }
    .goods_col_1{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .stepper{
        transform: translate(0,25%);
        margin-right: 20rpx;
    }
    .goods_col_3{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: 26rpx;
        color: #FF9502;
        margin-top: 10rpx;
    }
    .goods_col_4{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 10rpx;
    }
    .tips{
        text-align: right;
        font-size: 25rpx;
    }
    .goods_button{
        background-color: #FF9502;
        color: #ffffff !important;
        font-size: 30rpx;
        border: none !important;
        width: 710rpx;
        margin-left: 20rpx;
        margin-top: 40rpx;

    }
    .goods_col_2{
        color: #666666;
        font-size: 26rpx;
        margin-top: 10rpx;
    }
    .tips_{
        font-size: 26rpx;
        color: #666666;
    }
    input:-ms-input-placeholder {
        color: #CCCCCC;
    }/* Internet Explorer 10+ */

    input::-webkit-input-placeholder {
        color: #CCCCCC;
    }/* WebKit browsers */
    .input_box{
        width: 70%;
        margin-right: 20rpx;
    }
    .daofu{
        margin-right: 20rpx;
    }
</style>
